<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com https://v3.alapi.cn https://www.alapi.cn 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src 'self' https://v3.alapi.cn https://www.alapi.cn; frame-src https://www.alapi.cn;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" href="css/index.css">
        <title>快递查询</title>
        <style>
            .express-container {
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
                background-color: #fff;
                min-height: calc(100vh - 100px);
            }
            .nav {
                background-color: #2c3e50;
                padding: 15px;
                text-align: center;
                margin-bottom: 20px;
            }
            .nav a {
                color: #fff;
                text-decoration: none;
                margin: 0 15px;
                font-size: 16px;
                padding: 8px 15px;
                border-radius: 4px;
                transition: background-color 0.3s;
                display: inline-block;
            }
            .nav a:hover, .nav a.active {
                background-color: #34495e;
            }
            .express-header {
                text-align: center;
                margin-bottom: 30px;
                padding-bottom: 20px;
                border-bottom: 2px solid #3498db;
            }
            .express-header h1 {
                color: #2c3e50;
                font-size: 2.5em;
                margin-bottom: 10px;
            }
            .express-header p {
                color: #7f8c8d;
                font-size: 1.1em;
            }
            .form-container {
                background-color: #f8f9fa;
                padding: 25px;
                border-radius: 8px;
                margin-bottom: 30px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }
            .form-group {
                margin-bottom: 20px;
            }
            .form-group label {
                display: block;
                margin-bottom: 8px;
                color: #2c3e50;
                font-weight: bold;
                font-size: 14px;
            }
            .label-with-help {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .help-btn {
                background-color: #3498db;
                color: white;
                border: none;
                border-radius: 4px;
                padding: 4px 12px;
                font-size: 12px;
                cursor: pointer;
                transition: background-color 0.3s;
            }
            .help-btn:hover {
                background-color: #2980b9;
            }
            .token-input-wrapper {
                display: flex;
                gap: 10px;
                align-items: flex-start;
            }
            .token-input-wrapper input {
                flex: 1;
            }
            .form-group input,
            .form-group select {
                width: 100%;
                padding: 12px;
                border: 1px solid #ddd;
                border-radius: 6px;
                font-size: 16px;
                box-sizing: border-box;
                transition: border-color 0.3s;
                font-family: inherit;
            }
            .form-group input:focus,
            .form-group select:focus {
                outline: none;
                border-color: #3498db;
                box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
            }
            .form-row {
                display: flex;
                gap: 15px;
            }
            .form-row .form-group {
                flex: 1;
            }
            .submit-btn {
                width: 100%;
                padding: 15px;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                border: none;
                border-radius: 6px;
                font-size: 18px;
                font-weight: bold;
                cursor: pointer;
                transition: transform 0.2s, box-shadow 0.2s;
                margin-top: 10px;
            }
            .submit-btn:hover:not(:disabled) {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
            }
            .submit-btn:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }
            .result-container {
                background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
                padding: 30px;
                border-radius: 8px;
                margin-top: 20px;
                display: none;
            }
            .result-container.show {
                display: block;
            }
            .result-title {
                font-size: 1.5em;
                color: #2c3e50;
                margin-bottom: 20px;
                text-align: center;
                font-weight: bold;
            }
            .express-info {
                background-color: white;
                padding: 25px;
                border-radius: 8px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                margin-bottom: 20px;
            }
            .info-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                padding-bottom: 15px;
                border-bottom: 2px solid #eee;
            }
            .info-header-left h3 {
                margin: 0;
                color: #2c3e50;
                font-size: 1.3em;
            }
            .info-header-left p {
                margin: 5px 0 0 0;
                color: #7f8c8d;
                font-size: 0.9em;
            }
            .status-badge {
                padding: 8px 16px;
                border-radius: 20px;
                font-size: 14px;
                font-weight: bold;
            }
            .status-badge.transport {
                background-color: #e3f2fd;
                color: #1976d2;
            }
            .status-badge.signed {
                background-color: #e8f5e9;
                color: #388e3c;
            }
            .status-badge.collect {
                background-color: #fff3e0;
                color: #f57c00;
            }
            .tracking-list {
                list-style: none;
                padding: 0;
                margin: 0;
                position: relative;
            }
            .tracking-list::before {
                content: '';
                position: absolute;
                left: 15px;
                top: 0;
                bottom: 0;
                width: 2px;
                background: linear-gradient(to bottom, #3498db, #e0e0e0);
            }
            .tracking-item {
                position: relative;
                padding-left: 45px;
                padding-bottom: 25px;
                border-left: 2px solid transparent;
            }
            .tracking-item:last-child {
                padding-bottom: 0;
            }
            .tracking-item::before {
                content: '';
                position: absolute;
                left: 8px;
                top: 5px;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background-color: #3498db;
                border: 3px solid white;
                box-shadow: 0 0 0 2px #3498db;
            }
            .tracking-item:first-child::before {
                background-color: #27ae60;
                box-shadow: 0 0 0 2px #27ae60;
            }
            .tracking-content {
                background-color: #f8f9fa;
                padding: 15px;
                border-radius: 6px;
                margin-bottom: 10px;
            }
            .tracking-time {
                font-size: 12px;
                color: #7f8c8d;
                margin-bottom: 5px;
            }
            .tracking-text {
                font-size: 15px;
                color: #2c3e50;
                line-height: 1.6;
            }
            .error-message {
                background-color: #fee;
                color: #c00;
                padding: 15px;
                border-radius: 6px;
                border-left: 4px solid #f00;
                margin-top: 20px;
                display: none;
            }
            .error-message.show {
                display: block;
            }
            .loading {
                text-align: center;
                padding: 20px;
                color: #666;
                display: none;
            }
            .loading.show {
                display: block;
            }
            .loading::after {
                content: '...';
                animation: dots 1.5s steps(4, end) infinite;
            }
            @keyframes dots {
                0%, 20% { content: '.'; }
                40% { content: '..'; }
                60%, 100% { content: '...'; }
            }
            .modal-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 1000;
                justify-content: center;
                align-items: center;
            }
            .modal-overlay.show {
                display: flex;
            }
            .modal-content {
                background-color: white;
                border-radius: 8px;
                width: 90%;
                max-width: 600px;
                max-height: 80vh;
                overflow: hidden;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
                display: flex;
                flex-direction: column;
            }
            .modal-header {
                padding: 20px;
                border-bottom: 1px solid #eee;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .modal-header h2 {
                margin: 0;
                color: #2c3e50;
                font-size: 1.5em;
            }
            .modal-close {
                background: none;
                border: none;
                font-size: 24px;
                color: #999;
                cursor: pointer;
                padding: 0;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
                transition: background-color 0.3s;
            }
            .modal-close:hover {
                background-color: #f0f0f0;
                color: #333;
            }
            .modal-body {
                padding: 20px;
                overflow-y: auto;
                flex: 1;
            }
            .modal-body iframe {
                width: 100%;
                height: 500px;
                border: none;
                border-radius: 4px;
            }
            .modal-footer {
                padding: 15px 20px;
                border-top: 1px solid #eee;
                text-align: center;
                background-color: #f8f9fa;
            }
            .modal-footer a {
                color: #3498db;
                text-decoration: none;
                font-weight: bold;
            }
            .modal-footer a:hover {
                text-decoration: underline;
            }
            @media (max-width: 768px) {
                .form-row {
                    flex-direction: column;
                }
                .express-header h1 {
                    font-size: 2em;
                }
                .nav a {
                    display: block;
                    margin: 5px 0;
                }
                .modal-content {
                    width: 95%;
                    max-height: 90vh;
                }
                .modal-body iframe {
                    height: 400px;
                }
                .token-input-wrapper {
                    flex-direction: column;
                }
                .help-btn {
                    margin-top: 8px;
                    width: 100%;
                }
                .info-header {
                    flex-direction: column;
                    align-items: flex-start;
                }
                .status-badge {
                    margin-top: 10px;
                }
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <a href="index.html">首页</a>
            <a href="about.html">关于我们</a>
            <a href="poem.html">藏头诗</a>
            <a href="translate.html">翻译</a>
            <a href="express.html" class="active">快递查询</a>
            <a href="ip.html">IP查询</a>
            <a href="workday.html">工作日查询</a>
            <a href="network.html">网络状态</a>
            <a href="vibrate.html">震动功能</a>
            <a href="battery.html">电池状态</a>
        </div>
        <div class="express-container">
            <div class="express-header">
                <h1>快递查询</h1>
                <p>查询快递物流轨迹，支持中通、申通、顺丰、极兔、百世、圆通等</p>
            </div>

            <div class="form-container">
                <form id="express-form">
                    <div class="form-group">
                        <label for="token" class="label-with-help">
                            <span>API Token *</span>
                            <button type="button" class="help-btn" onclick="openTokenModal()">获取 Token</button>
                        </label>
                        <div class="token-input-wrapper">
                            <input type="text" id="token" name="token" placeholder="请输入API Token" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="number">快递单号 *</label>
                        <input type="text" id="number" name="number" placeholder="请输入快递单号" required>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="com">快递公司（可选）</label>
                            <select id="com" name="com">
                                <option value="">自动识别</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="phone">手机号后四位（可选）</label>
                            <input type="text" id="phone" name="phone" placeholder="顺丰/中通必填" maxlength="4" pattern="[0-9]{4}">
                        </div>
                    </div>

                    <button type="submit" class="submit-btn" id="submit-btn">查询</button>
                </form>

                <div class="loading" id="loading">正在查询</div>
                <div class="error-message" id="error-message"></div>
            </div>

            <div class="result-container" id="result-container">
                <div class="result-title">查询结果</div>
                <div class="express-info" id="express-info"></div>
            </div>
        </div>

        <!-- Token 获取弹窗 -->
        <div class="modal-overlay" id="token-modal" onclick="closeTokenModal(event)">
            <div class="modal-content" onclick="event.stopPropagation()">
                <div class="modal-header">
                    <h2>获取 API Token</h2>
                    <button class="modal-close" onclick="closeTokenModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <p style="margin-bottom: 15px; color: #666;">
                        请在下方页面注册并获取您的 API Token，然后将 Token 复制到输入框中。
                    </p>
                    <iframe src="https://www.alapi.cn/aff/nutpi" id="token-iframe"></iframe>
                </div>
                <div class="modal-footer">
                    <p style="margin: 0; color: #666;">
                        如果页面无法加载，请
                        <a href="https://www.alapi.cn/aff/nutpi" target="_blank">点击这里在新窗口打开</a>
                    </p>
                </div>
            </div>
        </div>

        <script src="cordova.js"></script>
        <script src="js/express.js"></script>
        <script>
            // 打开 Token 获取弹窗
            function openTokenModal() {
                document.getElementById('token-modal').classList.add('show');
                document.body.style.overflow = 'hidden';
            }

            // 关闭 Token 获取弹窗
            function closeTokenModal(event) {
                if (event && event.target !== event.currentTarget) {
                    return;
                }
                document.getElementById('token-modal').classList.remove('show');
                document.body.style.overflow = '';
            }

            // ESC 键关闭弹窗
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    const modal = document.getElementById('token-modal');
                    if (modal.classList.contains('show')) {
                        closeTokenModal();
                    }
                }
            });
        </script>
    </body>
</html>

